<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/goodsAllot'">
            <div class="vs-search-box">
                <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="调拨单号：">
                        <el-input style="width: 200px" placeholder="请输入调拨单号" v-model="paging.number" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="调拨单状态：">
                        <el-select style="width: 200px" clearable v-model="paging.status" placeholder="请选择">
                            <el-option label="待审核" value="0"> </el-option>
                            <el-option label="待出库" value="1"> </el-option>
                            <el-option label="已驳回" value="2"> </el-option>
                            <el-option label="已出库" value="3"> </el-option>
                            <el-option label="已撤回" value="4"> </el-option>
                            <el-option label="已入库" value="5"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请日期：">
                        <el-date-picker v-model="paging.date" type="daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                            style="width: 260px"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1, true)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button @click="utils.goUrl('/goodsAllotInfo?type=2')" type="primary">新增</el-button>
                    <el-button v-if="utils.getIsShopowner()" @click="exportFile" :loading="isExport"
                        icon="el-icon-download" type="primary">导出</el-button>
                </div>
                <el-table v-loading="loading" ref="table" row-key="id" :data="tableData"
                    header-row-class-name="has-gutter-table" style="width: 100%" border
                    @selection-change="handleSelectionChange" @sort-change="sortChange">
                    <el-table-column type="selection" reserve-selection width="55" align="center"> </el-table-column>
                    <el-table-column type="index" width="100px" label="序号" align="center"></el-table-column>
                    <el-table-column prop="number" label="调拨单号" min-width="150" align="center"></el-table-column>
                    <el-table-column prop="fromStore.title" label="调出门店" min-width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="toStore.title" label="调入门店" min-width="100" align="center"></el-table-column>
                    <el-table-column prop="goods_count" label="调拨数量" min-width="120" align="center"></el-table-column>
                    <el-table-column prop="goods_total" v-if="utils.getIsShopowner()" label="调拨金额" min-width="80"
                        align="center"></el-table-column>
                    <el-table-column prop="create_time" label="申请日期" min-width="160" align="center"></el-table-column>
                    <el-table-column prop="tech_num" label="调拨单状态" min-width="80" align="center">
                        <template slot-scope="scope">
                            <!-- {{scope.row.status | allocateStatus}} -->
                            {{ statusFn(scope.row) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(1, scope.row)" class="tab-table-text">详情</span>
                            <span v-if="scope.row.status == 0" @click="setRow(2, scope.row)"
                                class="tab-table-text">编辑</span>
                            <span v-if="scope.row.status == 0" @click="setRow(3, scope.row)"
                                class="tab-red-text">删除</span>
                            <!-- <span v-if="scope.row.status == 3" @click="setRow(4,scope.row)" class="tab-red-text">撤回</span> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            isExport: false,
            paging: {
                number: '',
                status: '',
                start_time: '',
                end_time: '',
                date: '',
                page: 1,
                total: 0,
                limit: 100,
            },
            tableData: [],
            multipleSelection: '',
        };
    },
    created() {
        if (this.$route.path == '/goodsAllot') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        async exportFile() {
            let obj = Object.assign({}, this.paging);
            let ids = this.$refs.table.selection;
            if (!ids || ids.length == 0) return this.$message.error('请选择要导出的商品调拨单!');
            obj.ids = ids.map((v) => v.id).join(',');
            this.isExport = true;
            let res = await this.$Http.allocationOrderListExport(obj);
            this.utils.downloadXlsx(res, '商品调拨单列表');
            this.isExport = false;
        },
        statusFn(row) {
            let userInfo = JSON.parse(localStorage.getItem('userInfo'));
            let arr1 = ['待审核', '待出库', '已驳回', '已出库', '已撤回', '已入库'];
            let arr2 = ['待审核', '待出库', '已驳回', '待入库', '已撤回', '已入库'];
            if (userInfo.store_id == row.from_store_id) {
                return arr1[row.status];
            } else {
                return arr2[row.status];
            }
        },
        //排序
        sortChange(column) {
            console.log(column);
            // this.form.sort = column.prop
            // this.form.sort_type = column.order == 'ascending' ? 'up' : 'down'
            // this.getHouseList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        },
        async setRow(type, row) {
            let beType = 1;
            if (row.goods_type > 2 && row.goods_type < 6) {
                beType = 2;
            }
            if (type == 1) {
                this.utils.goUrl('/goodsAllotInfo?id=' + row.id + '&beType=' + beType);
            } else if (type == 2) {
                this.utils.goUrl('/goodsAllotInfo?id=' + row.id + '&type=2');
            } else if (type == 3) {
                this.$confirm('是否确认删除此调拨单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(async () => {
                        let { code } = await this.$Http.allocationOrderDel({ id: row.id });
                        if (code) {
                            this.$message.success('删除成功');
                            this.repairGetList();
                        }
                    })
                    .catch(() => { });
            } else if (type == 4) {
                this.$confirm('是否确认撤回此调拨单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(async () => {
                        let { code } = await this.$Http.allocationOrderRevoke({ id: row.id });
                        if (code) {
                            this.$message.success('撤回成功');
                            this.repairGetList();
                        }
                    })
                    .catch(() => { });
            }
        },
        async repairGetList() {
            this.loading = true;
            let obj = Object.assign({}, this.paging);
            obj.start_time = obj.date ? obj.date[0] : '';
            obj.end_time = obj.date ? obj.date[1] : '';
            delete obj.date;
            if (!obj.status) {
                obj.status = -1;
            }
            let { code, data } = await this.$Http.allocationOrderList(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            // this.form.date = '';
            this.handleCurrentChange(1, true);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val, type) {
            if (type) this.$refs.table.clearSelection();
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>
